<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body  {
            background-color: #00ccff;
        }
        .iconContainer  {

        }
        .iconContainer>svg  {
            font-size: 16px;
            fill: currentColor;
            width: 1em;
            height: 1em;
            text-indent: 0;
            vertical-align: bottom;
        }
    </style>

</head>
<script>
    document.head.innerHTML += `

<svg>
  <defs>
                <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
                    <stop stop-color="#A383F7" offset="0%"></stop>
                    <stop stop-color="#193180" offset="100%"></stop>
                </linearGradient>
            </defs>
</svg>


  <svg id="abc" width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <symbol id="good1">
            <svg viewBox="0 0 29 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <title>好的案例1</title>
                <defs>
                    <filter id="filter-1">
                        <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
                    </filter>
                </defs>
                <g id="英文" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="首页" transform="translate(-1100.000000, -3731.000000)">
                        <g id="座机" transform="translate(1100.000000, 3731.000000)" filter="url(#filter-1)">
                            <g>
                                <path d="M26.9455618,2.42819935 L13.5703708,2.42819935 L13.5703708,2.10672865 C13.5703708,0.944790292 12.6286854,0 11.4712921,0 L7.20633708,0 C6.04861798,0 5.10725843,0.945117322 5.10725843,2.10672865 L5.10725843,2.42819935 L2.0544382,2.42819935 C0.921808989,2.42819935 0,3.35271377 0,4.49012486 L0,22.8352118 C0,23.9722959 0.921808989,24.8971373 2.0544382,24.8971373 L3.91891011,24.8971373 C4.15123596,26.647403 5.50967416,28 7.16137079,28 C8.81339326,28 10.1718315,26.647403 10.4041573,24.8971373 L26.9455618,24.8971373 C28.078191,24.8971373 29,23.9726229 29,22.8352118 L29,4.49012486 C29,3.3530408 28.078191,2.42819935 26.9455618,2.42819935 Z M7.33374157,2.23459746 L11.343236,2.23459746 L11.343236,17.8054871 L7.33374157,17.8054871 L7.33374157,2.23459746 L7.33374157,2.23459746 Z M2.22680899,4.66312384 L5.10693258,4.66312384 L5.10693258,17.9336829 C5.10693258,19.0956213 6.04861798,20.0404116 7.20601124,20.0404116 L8.22524719,20.0404116 L8.22524719,22.6618858 L2.22648315,22.6618858 L2.22648315,4.66312384 L2.22680899,4.66312384 Z M7.16137079,25.7647485 C6.72539326,25.7647485 6.34155056,25.4001098 6.17960674,24.8968103 L8.14313483,24.8968103 C7.98119101,25.4001098 7.59734831,25.7647485 7.16137079,25.7647485 Z M26.773191,22.6618858 L10.4520562,22.6618858 L10.4520562,20.0407386 L11.4709663,20.0407386 C12.6286854,20.0407386 13.5700449,19.0956213 13.5700449,17.93401 L13.5700449,4.66312384 L26.7728652,4.66312384 L26.7728652,22.6618858 L26.773191,22.6618858 Z" id="形状" fill="#666666" fill-rule="nonzero"></path>
                                <path d="M17.2044502,10 L24.7955498,10 C25.4598517,10 26,9.49695923 26,8.87829417 L26,7.12170583 C26,6.50304077 25.4598517,6 24.7955498,6 L17.2044502,6 C16.5401483,6 16,6.50304077 16,7.12170583 L16,8.87829417 C16,9.49695923 16.5401483,10 17.2044502,10 Z M17.8365044,7.71033861 L24.1634956,7.71033861 L24.1634956,8.28966139 L17.8365044,8.28966139 L17.8365044,7.71033861 Z" id="形状" fill="#666666" fill-rule="nonzero"></path>
                                <path d="M16,12 C16,12.5522847 16.4477153,13 17,13 C17.5522847,13 18,12.5522847 18,12 C18,11.4477153 17.5522847,11 17,11 C16.4477153,11 16,11.4477153 16,12 L16,12 Z" id="路径" fill="#666666" fill-rule="nonzero"></path>
                                <path d="M16,16 C16,16.5522847 16.4477153,17 17,17 C17.5522847,17 18,16.5522847 18,16 C18,15.4477153 17.5522847,15 17,15 C16.4477153,15 16,15.4477153 16,16 Z" id="路径" fill="#666666" fill-rule="nonzero"></path>
                                <path d="M17,18 C16.4478318,18 16,18.4476278 16,18.9998686 C16,19.5521093 16.447569,20 17,20 C17.5521682,20 18,19.5523722 18,18.9998686 C18,18.4476278 17.552431,18 17,18 Z" id="路径" fill="#666666" fill-rule="nonzero"></path>
                                <path d="M19,12 C19,12.5522847 19.4477153,13 20,13 C20.5522847,13 21,12.5522847 21,12 C21,11.4477153 20.5522847,11 20,11 C19.4477153,11 19,11.4477153 19,12 L19,12 Z" id="路径" fill="#666666" fill-rule="nonzero"></path>
                                <path d="M19,16 C19,16.5522847 19.4477153,17 20,17 C20.5522847,17 21,16.5522847 21,16 C21,15.4477153 20.5522847,15 20,15 C19.4477153,15 19,15.4477153 19,16 Z" id="路径" fill="#666666" fill-rule="nonzero"></path>
                                <path d="M20.2386068,17.6208658 C19.5546875,17.6208658 19,18.1533491 19,18.8102765 C19,19.467204 19.554362,20 20.2386068,20 C20.922526,20 21.4772135,19.4675167 21.4772135,18.8102765 C21.476888,18.1533491 20.922526,17.6208658 20.2386068,17.6208658 Z M23.7613932,11 C23.077474,11 22.5227865,11.5324833 22.5227865,12.1897235 C22.5227865,12.8466509 23.0771484,13.3794469 23.7613932,13.3794469 C24.4453125,13.3794469 25,12.8469636 25,12.1897235 C25,11.532796 24.4453125,11 23.7613932,11 Z M23.7613932,14.3105892 C23.077474,14.3105892 22.5227865,14.8430725 22.5227865,15.5003127 C22.5227865,16.1572401 23.0771484,16.6900361 23.7613932,16.6900361 C24.4453125,16.6900361 25,16.1575528 25,15.5003127 C25,14.8430725 24.4453125,14.3105892 23.7613932,14.3105892 Z M23.7613932,17.6208658 C23.077474,17.6208658 22.5227865,18.1533491 22.5227865,18.8102765 C22.5227865,19.467204 23.0771484,20 23.7613932,20 C24.4453125,20 25,19.4675167 25,18.8102765 C25,18.1533491 24.4453125,17.6208658 23.7613932,17.6208658 Z" id="形状" fill="#666666" fill-rule="nonzero"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
        </symbol>
        <symbol id="good2">
            <svg viewBox="0 0 30 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <title>好的案例2</title>
                <defs>
                    <filter id="filter-1">
                        <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
                    </filter>
                </defs>
                <g id="英文" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="首页" transform="translate(-1367.000000, -3733.000000)">
                        <g id="邮箱" transform="translate(1367.000000, 3733.000000)" filter="url(#filter-1)">
                            <g>
                                <path d="M27.8571429,0 L2.14285714,0 C0.964285714,0 0,0.981818182 0,2.18181818 L0,21.8181818 C0,23.0181818 0.964285714,24 2.14285714,24 L27.8571429,24 C29.0357143,24 30,23.0181818 30,21.8181818 L30,2.18181818 C30,0.981818182 29.0357143,0 27.8571429,0 Z M26.7857143,2.18181818 L16.6071429,11.6727273 C15.75,12.4363636 14.3571429,12.4363636 13.3928571,11.6727273 L3.21428571,2.18181818 L26.7857143,2.18181818 Z M2.14285714,4.36363636 L9.64285714,11.8909091 L2.14285714,19.6363636 L2.14285714,4.36363636 Z M3.21428571,21.8181818 L11.3571429,13.8545455 C12.3214286,14.7272727 13.6071429,15.2727273 15,15.2727273 C16.3928571,15.2727273 17.6785714,14.7272727 18.6428571,13.8545455 L26.7857143,21.8181818 L3.21428571,21.8181818 Z M27.8571429,19.6363636 L20.3571429,11.8909091 L27.8571429,4.36363636 L27.8571429,19.6363636 Z" id="形状" fill="#333333" fill-rule="nonzero"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
        </symbol>
        <symbol id="bad1">
            <title>坏的案例1</title>
            <defs>
                <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
                    <stop stop-color="#A383F7" offset="0%"></stop>
                    <stop stop-color="#193180" offset="100%"></stop>
                </linearGradient>
            </defs>
            <g id="中文" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="研究联盟-地区医院详情" transform="translate(-997.000000, -315.000000)" fill="url(#linearGradient-1)">
                    <polygon id="箭头" points="997 315 1017 325.555556 997 335 1001.49939 325.555556"></polygon>
                </g>
            </g>
        </symbol>
        <symbol id="bestPractice">
            <title>最佳实践</title>
            <path d="M10.2857143,0 C11.2324881,0 12,0.767511857 12,1.71428571 L12,10.2857143 C12,11.2324881 11.2324881,12 10.2857143,12 L1.71428571,12 C0.767511857,12 0,11.2324881 0,10.2857143 L0,1.71428571 C0,0.767511857 0.767511857,0 1.71428571,0 L10.2857143,0 Z M10.2857143,0.857142857 L1.71428571,0.857142857 C1.27471214,0.857142857 0.912422434,1.18803445 0.862909484,1.61432475 L0.857142857,1.71428571 L0.857142857,10.2857143 C0.857142857,10.7252879 1.18803445,11.0875776 1.61432475,11.1370905 L1.71428571,11.1428571 L10.2857143,11.1428571 C10.7252879,11.1428571 11.0875776,10.8119656 11.1370905,10.3856753 L11.1428571,10.2857143 L11.1428571,1.71428571 C11.1428571,1.27471214 10.8119656,0.912422434 10.3856753,0.862909484 L10.2857143,0.857142857 Z" id="矩形备份"></path>
            <path d="M4.23428571,8.96571429 L4.75714286,7.53428571 L7.58571429,7.53428571 L8.1,8.96571429 L9.52285714,8.96571429 L6.96857143,2.33142857 L5.45142857,2.33142857 L2.77714286,8.96571429 L4.23428571,8.96571429 Z M7.12285714,6.33428571 L5.22857143,6.33428571 L6.19714286,3.80571429 L7.12285714,6.33428571 Z" id="A"></path>
        </symbol>
    </svg>



`;
</script>
<body>


<div class="iconContainer">

    <svg aria-hidden="true">
        <use xlink:href="#good1"></use>
    </svg>
    <hr/>
    <svg aria-hidden="true">
        <use xlink:href="#good2"></use>
    </svg>
    <hr/>
    <svg aria-hidden="true">
        <use xlink:href="#bad1"></use>
    </svg>
    <hr/>
    <svg aria-hidden="true">
        <use xlink:href="#bestPractice"></use>
    </svg>
</div>

</body>

</html>